<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>webui-menu菜单元素测试</title>
<link href="../css/960.css" rel="stylesheet" type="text/css"/>
<link href="../css/webui.css" rel="stylesheet" type="text/css"/>

<link href="../js/lib/uniform/uniform.default.css" rel="stylesheet" type="text/css"/>

<link href="../css/webui-buttons.css" rel="stylesheet" type="text/css"/>
<link href="../css/webui-menus.css" rel="stylesheet" type="text/css"/>
<link href="../css/gh-buttons.css" rel="stylesheet" type="text/css"/>
<link href="../js/lib/jqueryTools/forms/default.css" rel="stylesheet" type="text/css"/>

<script src="../js/lib/jquery-1.5.1.min.js" type="text/javascript"></script>
<script  src="../js/lib/jquery.hoverIntent.js" type="text/javascript"></script>
<script src="../js/jquery.webui.menu.js" type="text/javascript"></script>
<script src="../js/lib/jquery.superfish.js" type="text/javascript"></script>
<script src="../js/lib/jquery.supersubs.js" type="text/javascript"></script>

<style type="text/css">
   .menu-panel .pcontent {
	   
		paddint:20px;
	}
	
	.table td{
	   height:30px;	
	}
	
	h3{
		color:#0088cc;	
		height:30px;
		line-height:30px;
		padding-left:10px;
		font-size:18px;
	}
	
	.menu-panel{
		-webkit-border-radius: 4px;
	 -moz-border-radius: 4px;
	 -o-border-radius: 4px; 
	 -khtml-border-radius: 4px; 
	 border-radius: 4px;
	 border-top:1px solid #ddd;	
	 *border:1px solid #ddd;
	}
	
</style>


<script type="text/javascript">



$(function(){
	$("#mainmenu").wuMenu({interval:100});
	
	
	$("#wuMenuColor").change(function(){
	    	var selColor = $(this).val();
			$("#mainmenu").removeClass().addClass("menu-alpha " + selColor);
    });
	
	$("#sfMenuColor").change(function(){
		    var selColor = $(this).val();
			$("#sfMenu").removeClass().addClass("menubar-alpha " + selColor); 
	});
	
	$("#linkbarBg").change(function(){
			var selbg = $(this).val();	
			var selColor = $("#linkbarColor").val();	
			setlinkBarStyle(selColor,selbg);
			
	});
	
	$("#linkbarColor").change(function(){
			var selbg = $("#linkbarBg").val();	
			var selColor = $(this).val();	
			setlinkBarStyle(selColor,selbg);	
	});
	
	$("#tabColor").change(function(){
		var color = $(this).val();
		$("#tabMenuMain").removeClass().addClass("tabbar");
		if (color&&color!=""){
			$("#tabMenuMain").addClass(color);
		}
		
	});
	
	
	$("#sfVMenuColor").change(function(){
		   var selColor = $(this).val();
			$("#sfVMenu").removeClass().addClass("vmenubar-alpha " + selColor); 
	});
	
	$("ul.sf-menu:not(#sf-navmenu)").supersubs({ 
            minWidth:    12, 
            maxWidth:    27,  
            extraWidth:  1
       }).superfish();
	   
	 $("ul#sf-navmenu").superfish({ 
            pathClass:  'current' 
        }); 
});

   function setlinkBarStyle(selColor,selbg){
	       $("#linkbarMain").removeClass().addClass("linkbar");
			if (selbg!="none"){
				$("#linkbarMain").addClass(selbg);
			}
			if (selColor!="none"){
			   $("#linkbarMain").addClass(selColor);	
			}
	}

</script>

</head>

<body class="macbg1">
<div class="container_12 whitebg">

	<div class="head graybg-d1 grid_12">
    		<div class="logo grid_8 alpha">
            	<h1 class="white">WebUI-FrameWork</h1>
            </div>
             <div class="logo grid_4 omega">
            	<ul  class=" linkbar white">
                   <li><a href="#">welcome: Mr </a></li>
                    <li><a href="#" class="orange-l1">my account </a></li>
                    <li><span>my account </span></li>
                </ul>
            </div>
    </div>
    
    
    <div class="clear-spacer"></div>
    
    
   <div class="grid_12">
      <div class="panel menu-panel shadow-big">
      		<h3>no drop down menu </h3>
            <div class="pcontent">
                <div class="menubar-alpha">
                          <ul class="menu-alpha greenbg2">
                                <li><a href="#">首页</a></li>
                                <li class="current"><a href="#">工具下载</a></li>
                                 <li><a href="#">文档教程</a></li>
                                <li><a href="#">项目</a></li>
                        </ul>
                </div> 
                                
       </div>
      </div>
   </div>
   

    <div class="clear-spacer"></div>  
    
    
     <div class="grid_12">
      <div class="panel menu-panel shadow-big">
      		<h3>linkbar menu </h3>
            <div class="pcontent">
                              <span>background color:</span>
                		       <select id="linkbarBg">
                                    <option value="none">none</option>
                                   <option value="graybg">graybg</option>
                                   <option value="bluebg">bluebg</option>
                                   <option value="skybg">skybg</option>
                                   <option value="greenbg">greenbg</option>
                                   <option value="greenbg2">greenbg2</option>
                                   <option value="redbg">redbg</option>
                                   <option value="orangebg">orangebg</option>
                                   <option value="autumnbg">autumnbg</option>
                                   <option value="earthbg">earthbg</option>
                                   <option value="coffeebg">coffeebg</option>
                                   <option value="bluegraybg" selected="selected">bluegraybg</option>
                                   <option value="graybluebg">graybluebg</option>
                                   <option value="pinkbg">pinkbg</option>
                                    <option value="blackbg">blackbg</option>
                               </select>
                               
                               &nbsp;&nbsp; &nbsp;&nbsp; &nbsp;&nbsp; &nbsp;&nbsp;
                               <span>font color:</span>
                               <select id="linkbarColor">
                                    <option value="none"  selected="selected">none</option>
                                    <option value="gray">gray</option>
                                   <option value="blue">blue</option>
                                   <option value="sky">sky</option>
                                   <option value="green">green</option>
                                   <option value="green2">green2</option>
                                   <option value="red">red</option>
                                   <option value="orange">orange</option>
                                   <option value="autumn">autumn</option>
                                   <option value="earth">earth</option>
                                   <option value="coffee">coffee</option>
                                   <option value="bluegray" selected>blue</option>
                                   <option value="grayblue">grayblue</option>
                                  
                               </select>
                               <p>&nbsp;<p/>
                              <ul id="linkbarMain" class="linkbar bluegraybg">
                                    <li><a href="#">首页</a></li>
                                    <li class="space-dot">&nbsp;</li>
                                    <li class="current"><a href="#">工具下载</a></li>
                                    <li class="space-dot">&nbsp;</li>
                                     <li><a href="#">文档教程</a></li>
                                     <li class="space-dot">&nbsp;</li>
                                    <li><a href="#">项目</a></li>
                            </ul>
                      
                
                                
       </div>
      </div>
   </div>

    <div class="clear-spacer"></div>  
    
    
    <div class="grid_12">
      <div class="panel menu-panel  shadow-big">
      		<h3>webui mega  menu </h3>
            <div class="pcontent">
               <select id="wuMenuColor">
                   <option value="graybg">graybg</option>
                   <option value="bluebg" selected="selected">bluebg</option>
                   <option value="skybg">skybg</option>
                   <option value="greenbg">greenbg</option>
                   <option value="greenbg2">greenbg2</option>
                   <option value="redbg">redbg</option>
                   <option value="orangebg">orangebg</option>
                   <option value="autumnbg">autumnbg</option>
                   <option value="earthbg">earthbg</option>
                   <option value="coffeebg">coffeebg</option>
                   <option value="bluegraybg">bluegraybg</option>
                   <option value="graybluebg">graybluebg</option>
                   <option value="pinkbg">pinkbg</option>
                    <option value="blackbg">blackbg</option>
               </select>
               <p>&nbsp;</p>

              
               <div class="menubar-alpha" >
                    <ul id="mainmenu" class="menu-alpha bluebg" >
                        <li>
                        	<a href="#" class="home">首页</a>
                        </li>
                        <!-- 这里多了一个submenu class 主要是为了设置子菜单的z-index属性，由于ie的bug，z-index 设置到子元素上会造成部分失效-->
                        <li class="submenu">
                        		<a href="#" >产品分类</a>
                               <div class="sub">
                                  
                                    <ul>
                                        <li><h2><a href="#">我的最爱</a></h2></li>
                                        <li><a href="#">日记</a></li>
                                        <li><a href="#">我的收藏</a></li>
                                    </ul>
                                    <ul>
                                        <li><h2><a href="#">邮件</a></h2></li>
                                        <li><a href="#">收件箱</a></li>
                                        <li><a href="#">草稿</a></li>
                                    </ul>
                               </div> 
                        </li>
                        <li class="submenu">
                        		<a href="#" >销售</a>
                                <div class="sub">
                                    <ul>
                                        <li><h2><a href="#">桌面</a></h2></li>
                                        <li><a href="#">子菜单项目</a></li>
                                        <li><a href="#">链接菜单</a></li>
                                    </ul>
                                    <ul>
                                        <li><h2><a href="#">社会文化</a></h2></li>
                                        <li><a href="#">生活</a></li>
                                        <li><a href="#">社会见闻</a></li>
                                        <li><a href="#">奇闻趣事</a></li>
                                    </ul>
                                    <ul>
                                        <li><h2><a href="#">我的最爱</a></h2></li>
                                        <li><a href="#">日记</a></li>
                                        <li><a href="#">我的收藏</a></li>
                                    </ul>
                                    <ul>
                                        <li><h2><a href="#">邮件</a></h2></li>
                                        <li><a href="#">收件箱</a></li>
                                        <li><a href="#">草稿</a></li>
                                    </ul>
                               </div> 
                        </li>
                        <li><a href="#">联系我们</a></li>
                        <li><a href="#">定位</a></li>
                  </ul>
              </div>
                    
           </div>
      </div>
   </div>
   
   
   
  <div class="clear-spacer"></div>  
   
   
    <div class="grid_12">
      <div class="panel menu-panel shadow-big">
      		<h3>sf-menu normal </h3>
            <div class="pcontent">
              <select id="sfMenuColor">
                   <option value="sf-gray">sf-gray</option>
                   <option value="sf-silver">sf-silver</option>
                    <option value="sf-blue">sf-sky</option>
                   <option value="sf-sky">sf-sky</option>
                   <option value="sf-green">sf-green</option>
                   <option value="sf-green2">sf-green2</option>
                   <option value="sf-red">sf-red</option>
                   <option value="sf-orange">sf-orange</option>
                   <option value="sf-autumn">sf-autumn</option>
                   <option value="sf-earth">sf-earth</option>
                   <option value="sf-coffee">sf-coffee</option>
                   <option value="sf-bluegray">sf-bluegray</option>
                   <option value="sf-grayblue">sf-grayblue</option>
                   <option value="sf-pink">sf-pink</option>
                   <option value="sf-silvergbg" selected="selected">sf-silvergbg</option>
                    <option value="sf-black">sf-black</option>
               </select>
               <p>&nbsp;</p>
                <div id="sfMenu" class="menubar-alpha menubar-small  sf-silvergbg">
                         <ul class="sf-menu">
                                <li class="current sf-submenu">
                                    <a href="#a">首页</a>
                                    <ul >
                                        <li>
                                            <a href="#aa">这是一个很长的菜单选项</a>
                                        </li>
                                        <li>
                                            <a href="#ab">分类</a>
                                            <ul>
                                                <li><a href="#">我的空间</a></li>
                                                <li><a href="#aba">相册</a></li>
                                                <li><a href="#abb">群聊</a></li>
                                                <li><a href="#abc">日志</a></li>
                                                <li><a href="#abd">备忘录</a></li>
                                            </ul>
                                        </li>
                                        <li>
                                            <a href="#">导航帮助</a>
                                           
                                        </li>
                                        <li>
                                            <a href="#">其它</a>
                                           
                                        </li>
                                    </ul>
                                </li>
                                <li>
                                    <a href="#">产品目录</a>
                                </li>
                                <li class="sf-submenu">
                                    <a href="#">功能介绍</a>
                                    <ul>
                                        <li>
                                            <a href="#">menu item</a>
                                            <ul>
                                                <li><a href="#">short</a></li>
                                                <li><a href="#">short</a></li>
                                                <li><a href="#">short</a></li>
                                                <li><a href="#">short</a></li>
                                                <li><a href="#">short</a></li>
                                            </ul>
                                        </li>
                                        <li>
                                            <a href="#">menu item</a>
                                           
                                        </li>
                                        <li>
                                            <a href="#">menu item</a>
                                          
                                        </li>
                                        <li>
                                            <a href="#">menu item</a>
                                          
                                        </li>
                                        <li>
                                            <a href="#">menu item</a>
                                           
                                        </li>
                                    </ul>
                                </li>
                                <li>
                                    <a href="#">其它</a>
                                </li>	
                            </ul>
                </div> 
                                
       </div>
      </div>
   </div>

    <div class="clear-spacer"></div>  
    
    
    
    <div class="grid_12">
      <div class="panel menu-panel shadow-big">
      		<h3>tabmenu </h3>
            <div class="pcontent">
                             
                               <select id="tabColor">
                                    <option value="" selected="selected">deffault</option>
                                    <option value="tab-gray">gray</option>
                                   <option value="tab-blue">blue</option>
                                   <option value="tab-sky">sky</option>
                                   <option value="tab-green">green</option>
                                   <option value="tab-green2">green2</option>
                                   <option value="tab-red">red</option>
                                   <option value="">orange</option>
                                   <option value="tab-autumn">autumn</option>
                                   <option value="tab-earth">earth</option>
                                   <option value="tab-coffee">coffee</option>
                                   <option value="tab-bluegray">bluegray</option>
                                   <option value="tab-grayblue">grayblue</option>
                                   
                               </select>
                               <p>&nbsp;<p/>
                              <div id="tabMenuMain" class="tabbar"> 
                                      <ul  class="tabmenu grid_6">
                                            <li><a href="#">首页</a></li>
                                            <li class="current"><a href="#">工具下载</a></li>
                                            <li><a href="#">文档教程</a></li>
                                            <li><a href="#">项目</a></li>
                                            <br class="clearf"/>
                                    </ul>
                                     <ul class="linkbar grid_5">
                                        <li class="space">&nbsp;</li>
                                        <li class="space">&nbsp;</li>
                                        <li><a href="#">首页</a></li>
                                        <li class="space-dot">&nbsp;</li>
                                        <li class="current"><a href="#">工具下载</a></li>
                                        <li class="space-dot">&nbsp;</li>
                                         <li><a href="#">文档教程</a></li>
                                         <li class="space-dot">&nbsp;</li>
                                        <li><a href="#">项目</a></li>
                                        <br class="clearf"/>
                                  </ul>
                            </div>
                            
                
                                
       </div>
      </div>
   </div>

    <div class="clear-spacer"></div> 
    
    

   
<div class="grid_12">
      <div class="panel menu-panel shadow-big">
      		<h3>sf-menu vertical </h3>
            <div class="pcontent">
              <select id="sfVMenuColor">
                   <option value="sf-gray">sf-gray</option>
                   <option value="sf-silver" selected="selected">sf-silver</option>
                    <option value="sf-blue">sf-blue</option>
                   <option value="sf-sky">sf-sky</option>
                   <option value="sf-green">sf-green</option>
                   <option value="sf-green2">sf-green2</option>
                   <option value="sf-red">sf-red</option>
                   <option value="sf-orange">sf-orange</option>
                   <option value="sf-autumn">sf-autumn</option>
                   <option value="sf-earth">sf-earth</option>
                   <option value="sf-coffee">sf-coffee</option>
                   <option value="sf-bluegray">sf-bluegray</option>
                   <option value="sf-grayblue">sf-grayblue</option>
                   <option value="sf-pink">sf-pink</option>
                    <option value="sf-black">sf-black</option>
               </select>
               <p>&nbsp;</p>
                <div id="sfVMenu" class="vmenubar-alpha sf-silver" style="width:120px;">
                         <ul class="sf-menu sf-vertical">
                                <li class="current sf-submenu" >
                                    <a href="#a">首页</a>
                                    <ul >
                                        <li>
                                            <a href="#aa">这是一个很长的菜单选项</a>
                                        </li>
                                        <li>
                                            <a href="#ab">分类</a>
                                            <ul>
                                                <li><a href="#">我的空间</a></li>
                                                <li><a href="#aba">相册</a></li>
                                                <li><a href="#abb">群聊</a></li>
                                                <li><a href="#abc">日志</a></li>
                                                <li><a href="#abd">备忘录</a></li>
                                            </ul>
                                        </li>
                                        <li>
                                            <a href="#">导航帮助</a>
                                           
                                        </li>
                                        <li>
                                            <a href="#">其它</a>
                                           
                                        </li>
                                    </ul>
                                </li>
                                <li>
                                    <a href="#">产品目录</a>
                                </li>
                                <li class="sf-submenu">
                                    <a href="#">功能介绍</a>
                                    <ul>
                                        <li>
                                            <a href="#">menu item</a>
                                            <ul>
                                                <li><a href="#">short</a></li>
                                                <li><a href="#">short</a></li>
                                                <li><a href="#">short</a></li>
                                                <li><a href="#">short</a></li>
                                                <li><a href="#">short</a></li>
                                            </ul>
                                        </li>
                                        <li>
                                            <a href="#">menu item</a>
                                           
                                        </li>
                                        <li>
                                            <a href="#">menu item</a>
                                          
                                        </li>
                                        <li>
                                            <a href="#">menu item</a>
                                          
                                        </li>
                                        <li>
                                            <a href="#">menu item</a>
                                           
                                        </li>
                                    </ul>
                                </li>
                                <li>
                                    <a href="#">其它</a>
                                </li>	
                            </ul>
                              <br class="clearf"/>       
                </div> 
                                       
       </div>
       
      </div>
   </div>

    <div class="clear-spacer"></div>  
    
    
    

    
    
    <div class="grid_12 panel pad10-tb shadow-big silverbg">
    	 <h3>vmenu</h3>
      <div class=" grid_3">
         
          <dl class="vmenu silverbg graybd ">
                <dt><a href="#">购物</a></dt>
                <dd><a href="#">生活</a></dd>
                <dd class="current"><a href="#">音乐</a></dd>
                <dd><a href="#">影视动画</a></dd>
                <dd><a href="#">图书</a></dd>
                
                <dt><a href="#">工具</a></dt>
                <dd><a href="#">日历</a></dd>
                <dd><a href="#">记事本</a></dd>
                <dd><a href="#">计算器</a></dd>
                <dd><a href="#">备忘录</a></dd>
          
          </dl>
      </div>
      
      
       <div class=" grid_3">
           <div class="box-l1 ">
                 <ul class="vmenu vmenu-icon">
                    <li class="current"><a href="#">回到首页<span class="intro">返回到首页</span></a></li>
                    <li><a href="#">看看软件</a></li>
                    <li><a href="#">浏览项目</a></li>
                     <li><a href="#">home</a></li>
                    <li><a href="#">soft</a></li>
                    <li><a href="#">项目</a></li>
                </ul>
          </div>
      </div>
    </div>
    
    <div class="clear-spacer"></div>
    
    
    <div class="grid_12">
      <div class="panel menu-panel shadow-big">
      		<h3> menu colors</h3>
            <div class="pcontent">
            
            
                <div class="menubar-alpha">
                          <ul class="menu-alpha graybg" >
                                <li><a href="#">首页</a></li>
                                <li class="current"><a href="#">工具下载</a></li>
                                 <li><a href="#">文档教程</a></li>
                                <li><a href="#">项目</a></li>
                        </ul>
                </div> 
                <br style="clear:both;"/>
                <div class="menubar-alpha">
                          <ul class="menu-alpha redbg">
                                <li><a href="#">首页</a></li>
                                <li><a href="#">工具下载</a></li>
                                 <li><a href="#">文档教程</a></li>
                                <li><a href="#">项目</a></li>
                        </ul>
                </div> 
                
               <br style="clear:both;"/>
                
                <div class="menubar-alpha">
                          <ul class="menu-alpha greenbg">
                                <li><a href="#">首页</a></li>
                                <li><a href="#">工具下载</a></li>
                                 <li><a href="#">文档教程</a></li>
                                <li><a href="#">项目</a></li>
                        </ul>
                </div>
                
                 <br style="clear:both;"/>
                
                <div class="menubar-alpha">
                          <ul class="menu-alpha greenbg2">
                                <li><a href="#">首页</a></li>
                                <li><a href="#">工具下载</a></li>
                                 <li><a href="#">文档教程</a></li>
                                <li><a href="#">项目</a></li>
                        </ul>
                </div>
                
               <br style="clear:both;"/>
                
                 <div class="menubar-alpha">
                          <ul class="menu-alpha bluebg">
                                <li><a href="#">首页</a></li>
                                <li><a href="#">工具下载</a></li>
                                 <li><a href="#">文档教程</a></li>
                                <li><a href="#">项目</a></li>
                        </ul>
                </div> 
                
                <br style="clear:both;"/>
                <div class="menubar-alpha">
                          <ul class="menu-alpha skybg">
                                <li><a href="#">首页</a></li>
                                <li><a href="#">工具下载</a></li>
                                 <li><a href="#">文档教程</a></li>
                                <li><a href="#">项目</a></li>
                        </ul>
                </div> 
                
                 <br style="clear:both;"/>
                <div class="menubar-alpha">
                          <ul class="menu-alpha orangebg">
                                <li><a href="#">首页</a></li>
                                <li><a href="#">工具下载</a></li>
                                 <li><a href="#">文档教程</a></li>
                                <li><a href="#">项目</a></li>
                        </ul>
                </div> 
                
                  <br style="clear:both;"/>
                <div class="menubar-alpha">
                          <ul class="menu-alpha autumnbg">
                                <li><a href="#">首页</a></li>
                                <li><a href="#">工具下载</a></li>
                                 <li><a href="#">文档教程</a></li>
                                <li><a href="#">项目</a></li>
                        </ul>
                </div> 
                
                  <br style="clear:both;"/>
                <div class="menubar-alpha">
                          <ul class="menu-alpha earthbg">
                                <li><a href="#">首页</a></li>
                                <li><a href="#">工具下载</a></li>
                                 <li><a href="#">文档教程</a></li>
                                <li><a href="#">项目</a></li>
                        </ul>
                </div> 
                
                  <br style="clear:both;"/>
                <div class="menubar-alpha">
                          <ul class="menu-alpha coffeebg">
                                <li><a href="#">首页</a></li>
                                <li><a href="#">工具下载</a></li>
                                 <li><a href="#">文档教程</a></li>
                                <li><a href="#">项目</a></li>
                        </ul>
                </div> 
                
                 <br style="clear:both;"/>
                <div class="menubar-alpha">
                          <ul class="menu-alpha pinkbg">
                                <li><a href="#">首页</a></li>
                                <li><a href="#">工具下载</a></li>
                                 <li><a href="#">文档教程</a></li>
                                <li><a href="#">项目</a></li>
                        </ul>
                </div> 
                
                  <br style="clear:both;"/>
                <div class="menubar-alpha">
                          <ul class="menu-alpha bluegraybg">
                                <li><a href="#">首页</a></li>
                                <li><a href="#">工具下载</a></li>
                                 <li><a href="#">文档教程</a></li>
                                <li><a href="#">项目</a></li>
                        </ul>
                </div> 
                
                  <br style="clear:both;"/>
                <div class="menubar-alpha">
                          <ul class="menu-alpha graybluebg">
                                <li><a href="#">首页</a></li>
                                <li><a href="#">工具下载</a></li>
                                 <li><a href="#">文档教程</a></li>
                                <li><a href="#">项目</a></li>
                        </ul>
                </div> 
                                
       </div>
      </div>
   </div>

 <div class="clear-spacer"></div>   
    
    
     <div class="grid_12">
      <div class="panel menu-panel shadow-big">
      		<h3> menu  gradient colors</h3>
            <div class="pcontent">
                <div class="menubar-alpha">
                          <ul class="menu-alpha graygbg">
                                <li><a href="#">首页</a></li>
                                <li class="current"><a href="#">工具下载</a></li>
                                 <li><a href="#">文档教程</a></li>
                                <li><a href="#">项目</a></li>
                        </ul>
                </div> 
                <br style="clear:both;"/>
                <div class="menubar-alpha">
                          <ul class="menu-alpha redgbg">
                                <li><a href="#">首页</a></li>
                                <li><a href="#">工具下载</a></li>
                                 <li><a href="#">文档教程</a></li>
                                <li><a href="#">项目</a></li>
                        </ul>
                </div> 
                
                <br style="clear:both;"/>
                
                <div class="menubar-alpha">
                          <ul class="menu-alpha greengbg">
                                <li><a href="#">首页</a></li>
                                <li><a href="#">工具下载</a></li>
                                 <li><a href="#">文档教程</a></li>
                                <li><a href="#">项目</a></li>
                        </ul>
                </div>
                
                 <br style="clear:both;"/>
                
                <div class="menubar-alpha">
                          <ul class="menu-alpha greengbg2">
                                <li><a href="#">首页</a></li>
                                <li><a href="#">工具下载</a></li>
                                 <li><a href="#">文档教程</a></li>
                                <li><a href="#">项目</a></li>
                        </ul>
                </div>
                
                <br style="clear:both;"/>
                
                 <div class="menubar-alpha">
                          <ul class="menu-alpha bluegbg">
                                <li><a href="#">首页</a></li>
                                <li><a href="#">工具下载</a></li>
                                 <li><a href="#">文档教程</a></li>
                                <li><a href="#">项目</a></li>
                        </ul>
                </div> 
                
                <br style="clear:both;"/>
                <div class="menubar-alpha">
                          <ul class="menu-alpha skygbg">
                                <li><a href="#">首页</a></li>
                                <li><a href="#">工具下载</a></li>
                                 <li><a href="#">文档教程</a></li>
                                <li><a href="#">项目</a></li>
                        </ul>
                </div> 
                
                 <br style="clear:both;"/>
                <div class="menubar-alpha">
                          <ul class="menu-alpha orangegbg">
                                <li><a href="#">首页</a></li>
                                <li><a href="#">工具下载</a></li>
                                 <li><a href="#">文档教程</a></li>
                                <li><a href="#">项目</a></li>
                        </ul>
                </div> 
                
                  <br style="clear:both;"/>
                <div class="menubar-alpha">
                          <ul class="menu-alpha autumngbg">
                                <li><a href="#">首页</a></li>
                                <li><a href="#">工具下载</a></li>
                                 <li><a href="#">文档教程</a></li>
                                <li><a href="#">项目</a></li>
                        </ul>
                </div> 
                
                  <br style="clear:both;"/>
                <div class="menubar-alpha">
                          <ul class="menu-alpha earthgbg">
                                <li><a href="#">首页</a></li>
                                <li><a href="#">工具下载</a></li>
                                 <li><a href="#">文档教程</a></li>
                                <li><a href="#">项目</a></li>
                        </ul>
                </div> 
                
                  <br style="clear:both;"/>
                <div class="menubar-alpha">
                          <ul class="menu-alpha coffeegbg">
                                <li><a href="#">首页</a></li>
                                <li><a href="#">工具下载</a></li>
                                 <li><a href="#">文档教程</a></li>
                                <li><a href="#">项目</a></li>
                        </ul>
                </div> 
                
                 <br style="clear:both;"/>
                <div class="menubar-alpha">
                          <ul class="menu-alpha pinkgbg">
                                <li><a href="#">首页</a></li>
                                <li><a href="#">工具下载</a></li>
                                 <li><a href="#">文档教程</a></li>
                                <li><a href="#">项目</a></li>
                        </ul>
                </div> 
                
                  <br style="clear:both;"/>
                <div class="menubar-alpha">
                          <ul class="menu-alpha bluegraygbg">
                                <li><a href="#">首页</a></li>
                                <li><a href="#">工具下载</a></li>
                                 <li><a href="#">文档教程</a></li>
                                <li><a href="#">项目</a></li>
                        </ul>
                </div> 
                
                  <br style="clear:both;"/>
                <div class="menubar-alpha">
                          <ul class="menu-alpha graybluegbg">
                                <li><a href="#">首页</a></li>
                                <li><a href="#">工具下载</a></li>
                                 <li><a href="#">文档教程</a></li>
                                <li><a href="#">项目</a></li>
                        </ul>
                </div> 
                                
       </div>
      </div>
   </div>

    <div class="clear-spacer"></div>
    
       

    
    
    
    <div class="grid_12 panel foot silverbg"  >
             <p><a href="#">welcome: Mr </a>  |  <a href="#" class="orange-l1">my account </a> | <span>my account </span></p>
             <p>copy rights  汉龙数码科技有限公司2001－2011</p>
      </div>
      <div class="clear"></div>
       <div class="spacer"></div>
    
</div>   

</body>
</html>
